<!--
 * @Author: 计都 3038199036@qq.com
 * @Date: 2024-09-19 09:20:13
 * @LastEditors: 计都 3038199036@qq.com
 * @LastEditTime: 2024-09-19 17:01:29
 * @FilePath: \vuePDF\src\components\header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="header">
        <el-breadcrumb separator=">" class="breadCrumb">
            <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">{{
                item.meta.title
                }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

//Breadcrumb.vue
<script>
export default {
    data() {
        return {
            breadList: [] // 路由集合
        };
    },
    watch: {
        $route() {
            this.getBreadcrumb();
        }
    },
    methods: {
        isHome(route) {
            return route.name === "home";
        },
        getBreadcrumb() {
            let matched = this.$route.matched;
            //如果不是首页
            if (!this.isHome(matched[0])) {
                matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
            }
            this.breadList = matched;
            // console.log(JSON.stringify(this.breadList) + "1234567890-");

        }
    },
    created() {
        this.getBreadcrumb();
    }
};
</script>

<style scoped>
.header {
    position: fixed;
    top: 0;
    left: 200px;
    width: calc(100% - 200px);
    height: 50px;
    background-color: #545c64;
    padding-left: 10px;
}


/* .el-breadcrumb__inner a, */
.breadCrumb,
a {
    height: 100%;
    color: aliceblue;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: left;
    align-items: center;
}

/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
    color: #ffffff !important;
    font-weight: bolder !important;
}

/* 被选中时的颜色 */
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner {
    color: #fc9105 !important;
    font-weight: bolder !important;
}
</style>